<template>
  <el-card>
    <div slot="header">
      <h3>潜在分析阈值-新增/编辑</h3>
    </div>
    <div>
      <LabelSelect
        clearable
        size="mini"
        placeholder="阈值类型"
        :value.sync="thresholdType.value"
        :options="thresholdType.options"
      />
      <el-divider />
      <!-- 按钮操作栏 -->
      <BtnRender :render="renderBtnsBar" />
      <el-row>
        <SkusTable
          :tableHeight="480"
          :defaultMinWidth="100"
          :dataSource="TableInfo.list"
          :columns="TableInfo.columns"
          :loading="TableInfo.loading"
          @handleCancelSelect="handleRemoveRow"
        />
      </el-row>
      <FooterFields :fieldsItems="fieldsItems" :fieldsData="fieldsData" />
    </div>
  </el-card>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import SkusTable from '@/components/skusTable';
import LabelSelect from '@/pages/commodity/components/LabelSelect';
import FooterFields from '@/pages/commodity/components/FooterFields/DataRender';
import { TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar } from '@/utils/getBtnsRender';
import { createExcelByExport, generateUuid, isResponseSuccess } from '@/utils/bizUtils';
import { THRESHOLD_TYPE_OPTIONS } from './constants/configs';

export default {
  components: {
    BtnRender,
    SkusTable,
    LabelSelect,
    FooterFields,
  },
  data () {
    return {
      TableInfo: new TableInfo(),
      thresholdType: {
        value: '',
        options: THRESHOLD_TYPE_OPTIONS
      },
      btnLoading: {
        export: false, // 导出loading
        submit: false, // 提交loading
      },
      fieldsData: {},
      fieldsItems: [],
    }
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const finalBtns = [
        {
          label: '返回',
          method: this.handleGoBack,
          type: 'default'
        },
        {
          label: '导出模板',
          method: this.handleExport,
          loading: this.btnLoading.export,
        },
        {
          label: '导入数据',
          action: '',
          methods: { handleUploadSuccess: this.handleUploadSuccess },
          isImport: true,
          loadingFn: this.TableInfo.setLoading
        },
        {
          label: '提交',
          method: this.handleSubmit,
          loading: this.btnLoading.submit,
        },
      ]
      return getListPageBtnsBar(h, finalBtns)
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'latentProductAnalysisThresholdList' })
    },
    // 导出模板
    async handleExport () {
      const data = {}
      const loadingFn = state => { this.btnLoading.export = state }
      const exportService = () => {}
      const res = await exportService(data, loadingFn)
      createExcelByExport({ res, excelTitle: `潜在商品分析阈值编辑导出模板_${generateUuid()}` })
    },
    // 导入
    handleUploadSuccess (res) {
      if (isResponseSuccess(res)) {
        this.TableInfo.setList(res.retData)
      }
    },
    // 提交
    async handleSubmit () {
      const data = {}
      const loadingFn = state => { this.btnLoading.submit = state }
      const submitService = () => {}
      const res = await submitService(data, loadingFn)
      if (isResponseSuccess(res)) {
        this.$message.success('提交成功')
        this.handleGoBack()
      }
    },
    // 删除
    handleRemoveRow ({ row }) {
      this.TableInfo.removeList(row, 'categoryUuid')
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-divider {
  margin: 10px 0;
}
</style>
